<template>
	<view class="search">
		<view class="" style="background-color: #fff;padding: 20rpx;display: flex;align-items: center;">
			<view @click="backtop" style="margin-right: 10px;"><u-icon name="arrow-left" size="35" ></u-icon></view>
			<u-search placeholder="搜索商品标题" v-model="keyword" shape="square" search-icon="search"
			:clearabled="true" :show-action="true" action-text="搜索" @search="search" @custom="search">
			</u-search>
		</view>
		<view class="my-box" style="">
			<view style="margin-bottom: 20rpx;">历史搜索</view>
			<view class="">
				<block v-for="(item,index) in hotTags">
					<u-tag :text="item" @click="tagclick(index)" style="margin:0 20rpx 16rpx 0;" mode="plain" shape="circle" color="#888" border-color="#efefef" bg-color="#efefef" />
				</block>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="my-box">
			<!-- <text>s</text>
			<Result></Result> -->
			<view class="m-flex" v-for="(item,index) in goodsList" :key="index" @click="toGoodsInfo(item.item_id)"
				style="margin-bottom: 60rpx;">
				<view class="m-col-l">
					<view class="goods-thumb-view" style="margin-right: 30rpx;">
						<u-image width="100%" height="250rpx" border-radius="10" :src="item.pict_url">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</view>
				<view class="m-col-r" style="position: relative;">
					<view class="u-line-2">
						<u-tag style="margin-right: 8rpx;" text="淘宝" mode="dark" type="error" size="mini"
							shape="square" :closeable="false" />
						<text>{{item.title}}</text>
					</view>
					<view class="" style="position: absolute;bottom: 0;width: 100%;">
						<view class="u-flex u-row-between">
							<view class="u-font-40" style="color: #ff0010;margin-bottom: 10rpx;font-weight: 600;">
								<text>￥{{item.zk_final_price}}</text>
								<text class="del-price">￥{{item.reserve_price}}</text>
							</view>
							<view class="coupon">
								<text>{{item.coupon_amount || 0}}元券</text>
							</view>
						</view>
						<view class="u-line-1">
							<u-icon name="taobao-circle-fill" size="32" color="#ff0100"></u-icon>{{item.shop_title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Result from './result.vue'
	export default {
		components:{Result},
		data() {
			return {
				keyword:'',
				hotTags:['衬衫','迪奥999','中秋礼盒','零食大礼包','洗衣液'],
				goodsList:[]
			}
		},
		mounted() {
			// this.$myRequest('/bang-dan',{'rankType':7}).then(res=>{
			// 	console.log(res.data)
			// })
		},
		methods: {
			search(){
				console.log('搜索'+this.keyword);
				uni.showLoading({
					title: '数据加载中'
				})
				this.$myRequest('/search',{'keyWords':this.keyword})
				.then(res=>{
					this.goodsList = res.data
					uni.hideLoading();
					console.log(res.data)
				})
			},
			toGoodsInfo(id) {
				uni.navigateTo({
					url: '../show/show?id=' + id
				})
			},
			tagclick(index){
				this.keyword=this.hotTags[index]
				console.log(this.hotTags[index])
			},
			backtop(){
				uni.switchTab({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style scoped>
	.my-box{
		background-color: #fff;padding: 30rpx;margin: 20rpx 0;
	}
</style>
